<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花崎未咲的小屋</title>
    <link rel="shortcut icon" href="https://static-cos.ovofish.com/static/miraipip/img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="static/css/main.css">
    <link rel="stylesheet" href="static/css/loading.css">
</head>

<body>
    <div id="loading">
        <div id="boxlogo" class="fl">
            <span id="logo" class="fl" style="margin-left: 110px;">
                <img data-v-loadimg1=""
                    src="" />
            </span>
            <div id="RTXT" class="fl ml2e opcy0">
                <p class="clf margin_top_3em">Powered By</p>
                <p class="clf">Akeno Misaki</p>
            </div>
        </div>
    </div>
    <!-- 顶部导航栏 -->
    <nav class="navbar hidden">
        <div class="navbar-content">
            <div class="navbar-logo">花崎未咲的小屋</div>
            <div class="navbar-actions">
                <a href="/ts3" class="login-btn">TEAMSPEAK</a>
            </div>
        </div>
    </nav>
    <!-- PC端全屏滚动结构 -->
    <div class="pc-container" id="pcContainer">
        <!-- 第一页：首页 -->
        <div class="section section-1">
            <div class="logo">
                <img class="Slogans" src="https://archive.ovofish.com/var/ui/custom/img/decras.png" alt="Akatsuki">
            </div>
        </div>

        <!-- 第二页：角色介绍 -->
        <div id="section-bg" class="section section-2">
            <!-- 添加STAFF装饰图（最下层） -->
            <img src="https://static-cos.ovofish.com/static/miraipip/img/decoration.b18931.png" alt="STAFF装饰"
                id="staffDecoration" class="staff-decoration">
            <div class="role-container" id="roleContainer">
                <!-- 左侧图片容器 -->
                <div class="role-images-container">
                    <h1 id="roleName">Akatsuki Misaki</h1> <!-- 角色名将位于左侧 -->
                    <div class="role-images">
                        <img src="https://static-cos.ovofish.com/static/miraipip/img/XCDK1893.jpg" alt="横向形象"
                            id="roleHorizontal">
                    </div>
                    <div class="role-url">
                        <a href="https://github.com/akatsuki-misaki" target="_blank">GITHUB.COM/Akatsuki-Misaki</a>
                    </div>
                </div>

                <!-- 右侧信息容器 -->
                <div class="role-info-container">
                    <div class="role-right-info">
                        <p class="info-roleDesc" id="roleDesc">本站主要运营者，负责网站的运营管理，负责绝大部分功能组件开发，隶属于某个神秘组织，提供图片托管服务，助力萌新站长。
                        </p> <!-- 描述将位于右侧 -->
                        <div class="role-btns">
                            <div class="role-btn-margin-bottom">
                                <button class="role-btn" data-role="default">赤月未咲</button>
                            </div>
                            <div class="role-btn-margin-bottom">
                                <button class="role-btn" data-role="costume">Yanam1Anna</button>
                            </div>
                            <div class="role-btn-margin-bottom">
                                <button class="role-btn" data-role="holiday">LiSHang999</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 第三页：新闻页 -->
        <div id="section-bg" class="section section-3">
            <!-- 添加新闻页装饰图（最下层） -->
            <img src="https://static-cos.ovofish.com/static/miraipip/img/decoration.b142143.png" alt="新闻装饰"
                id="newsDecoration" class="news-decoration">
            <div class="news-container">
                <h2>最新动态</h2>
                <div class="news-loading">加载中...</div> <!-- 加载提示 -->
                <div class="news-content"></div> <!-- 新闻内容容器 -->
            </div>
        </div>

        <!-- 第四页：暂留 -->
        <div class="section section-4" style="background: #e7eff8;">
            <h2>更多内容敬请期待...</h2>
        </div>
    </div>

    <!-- 手机端单页结构 -->
    <div class="mobile-container" id="mobileContainer">
        <div class="container">
            <h2>更多内容敬请期待...</h2>
        </div>
    </div>

    <footer class="footer" style="align-items: center;">
        <p>
            <a href="https://beian.mps.gov.cn/" target="_blank" rel="noopener noreferrer">
                <img src="static/img/粤公网安备_44122402240079号.svg" alt=""></a>
            <span style="margin-left: 50px; margin-right: 50px;">
            <a href="https://beian.mps.gov.cn/" target="_blank" rel="noopener noreferrer">
                <img src="static/img/粤公网安备_44122402240079号.svg" alt=""></a>
        </p>
    </footer>
    <script src="static/js/main.js"></script>
</body>

</html>